import React, { memo, useState, useEffect, useRef } from 'react'

import type { ReactNode } from 'react'
// import '@/components/header/header.less'
import { HeaderWrapper, HeaderLeft, HeaderRight } from './style'
import HeaderTitles from '@/assets/data/header-titles.json'
import { NavLink } from 'react-router-dom'
import { SearchOutlined } from '@ant-design/icons'
import { Input } from 'antd'
import { Modal } from 'antd'
import Login from '@/views/login'
import { useAppDispatch, useAppSelector } from '@/store'
import {
  fetchLoginKeyAction,
  fetchLoginQRCodeAction,
  fetchLoginQRCodeStatusAction
} from '@/views/login/store/login'

interface IProps {
  children?: ReactNode
}

interface TitleType {
  type: string
  title: string
  link: string
}
const Header: React.FC<IProps> = () => {
  function showItem(item: TitleType) {
    if (item.type === 'path') {
      return (
        <NavLink
          to={item.link}
          className={({ isActive }) => (isActive ? 'active' : '')}
        >
          {item.title}
          <i className="icon sprite_01"></i>
        </NavLink>
      )
    } else if (item.type === 'link') {
      return <a href={item.link}>{item.title}</a>
    }
  }
  const [isModalOpen, setIsModalOpen] = useState(false)

  const dispatch = useAppDispatch()
  const { unikey, loginQRCodeStatus } = useAppSelector((state) => ({
    unikey: state.login.unikey,
    loginQRCodeStatus: state.login.loginQRCodeStatus
  }))

  useEffect(() => {
    dispatch(fetchLoginKeyAction())
  }, [])
  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)

  const showModal = () => {
    setIsModalOpen(true)
    dispatch(fetchLoginKeyAction()).then(() => {
      console.log(unikey, '打开后的unikey')
      if (unikey) {
        dispatch(fetchLoginQRCodeAction(unikey))
        if (timerRef.current) {
          clearInterval(timerRef.current)
          timerRef.current = null
        }
        timerRef.current = setInterval(() => {
          dispatch(fetchLoginQRCodeStatusAction(unikey))
        }, 3000)
      }
    })
  }
  const handleCancel = () => {
    setIsModalOpen(false)
    console.log('关闭弹窗')
    if (timerRef.current) {
      clearInterval(timerRef.current)
      timerRef.current = null
    }
  }

  useEffect(() => {
    if (!timerRef.current) return
    if (loginQRCodeStatus === 800) {
      clearInterval(timerRef.current)
      timerRef.current = null
    } else if (loginQRCodeStatus === 801) {
      console.log('带扫码')
    } else if (loginQRCodeStatus === 802) {
      console.log('待确认')

    } else if (loginQRCodeStatus === 803) {
      setIsModalOpen(false)
      clearInterval(timerRef.current)
      timerRef.current = null
      console.log('登录成功', loginQRCodeStatus)
    } else{
      clearInterval(timerRef.current)
      timerRef.current = null
    }
  }, [loginQRCodeStatus])

  useEffect(() => {
    return () => {
      if (timerRef.current) {
        clearInterval(timerRef.current)
        timerRef.current = null
      }
    }
  }, [])

  return (
    <div>
      <HeaderWrapper>
        <div className="content">
          <HeaderLeft>
            <a className="logo sprite_01" href="#/">
              网易云音乐
            </a>

            <div className="select-list">
              {HeaderTitles.map((item) => {
                return (
                  <div className="select-item" key={item.title}>
                    {showItem(item)}
                  </div>
                )
              })}
            </div>
          </HeaderLeft>

          <HeaderRight>
            <Input
              className="search"
              prefix={<SearchOutlined />}
              placeholder="音乐/视频/电台/用户"
            />
            <div className="center">创作者中心</div>
            <div className="login" onClick={() => showModal()}>
              登录
            </div>
            <Modal
             
              title="登录"
              closable={{ 'aria-label': 'Custom Close Button' }}
              open={isModalOpen}
              onCancel={handleCancel}
              mask={false}
              centered
              footer={null}
            >
              <Login />
            </Modal>
          </HeaderRight>
        </div>
        <div className="divider"></div>
      </HeaderWrapper>
    </div>
  )
}

export default memo(Header)
